<template>
  <div class="params-info">0=【=【
   
    <div class="params-size">
      <ul>
        <li
          v-for="(sizes, index) in paramsinfo.sizes"
          :key="index"
          :class="{'params-size-title':index==0}"
        >
          <span v-for="(item, index) in sizes" :key="index">{{item}}</span>
        </li>
      </ul>
    </div>
    <div class="params-detail-info">
      <ul>
        <!-- 连续多个vfor index indexy indexz取名字 -->
        <li v-for="(info, index) in paramsinfo.infos" :key="index">
          <span
            v-for="(item, indey) in info"
            :key="indey"
            :class="{'info-value':indey=='value'}"
          >{{item}}</span>
        </li>
      </ul>
    </div>
    <div class="info-img" v-if="paramsinfo.image">
      <img :src="paramsinfo.image" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "ParamsInfo",
  props: {
    paramsinfo: {
      type: Object,
      default() {
        {
        }
      }
    }
  },
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
   
  },
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.params-info {
  margin: 0 10px;
  .params-size {
    ul {
      li {
        display: flex;
        flex-flow: row nowrap;
        // justify-content: space-between;
        align-items: center;
        height: 42px;
        font-size: 14px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        // &.params-size-title{
        //   span:not(:first-child){
        //     padding-right: 5px;
        //   }
        // }
        span {
          flex: 1;
          text-align: left;
        }
      }
    }
  }
  .params-detail-info {
    ul {
      li {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        height: 42px;
        font-size: 14px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        span {
          &:first-child {
            flex: 0 0 95px;
          }
          &.info-value {
            flex: 1;
            color: #eb4868;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>